Applying Modifiers, Themes, Colors, and Typography in Android Using Jetpack Compose

Course: Android App Development

Topic: Applying Modifiers, Themes, Colors, and Typography

Course Link: Android App Development Course

Demo Registration: Register for a Course Demo

Website: JustAcademy Homepage

1. Introduction

In Android application development, modifiers, themes, colors, and typography are essential for designing attractive, consistent, accessible, and user-friendly interfaces. Jetpack Compose provides a declarative approach to UI development, allowing developers to customize the appearance and behavior of components directly through Kotlin code.

Modifiers control layout, spacing, size, background, and interaction. Themes define the application's overall design system. Colors establish visual identity and communicate meaning, while typography controls text appearance, hierarchy, and readability.

Jetpack Compose Material 3 brings these concepts together through MaterialTheme, which provides a consistent color scheme, typography system, and shape definitions throughout an application. Read the official Material 3 documentation.

Learning Objectives

• Understand modifiers and how they customize composable elements.
• Apply padding, size, background, borders, and click interactions.
• Understand themes and their role in consistent UI design.
• Create custom light and dark color schemes.
• Use Material 3 color roles effectively.
• Customize typography with font size, weight, and line height.
• Build reusable components using theme values.
• Understand dynamic colors and accessibility considerations.
• Develop a consistently styled Android screen.

2. Understanding Modifiers in Jetpack Compose

A Modifier is an object used to customize a composable's layout, appearance, drawing, input behavior, and semantics. Modifiers allow developers to adjust a component without creating an entirely new UI element.

For example, a Text component can use modifiers to occupy the available width, add padding, display a background, and respond to clicks.

Why Modifiers Are Important

• Control the size and positioning of UI components.
• Add padding and spacing between elements.
• Apply backgrounds, borders, and clipping shapes.
• Handle user interactions such as clicks.
• Improve accessibility through semantics-related modifiers.
• Make reusable components customizable by their callers.

Basic Modifier Syntax

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun WelcomeMessage() {
    Text(
        text = "Welcome to Android Development",
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    )
}

In this example, fillMaxWidth() requests the available width, while padding(16.dp) adds spacing around the content according to the modifier's position in the chain.

3. Commonly Used Modifiers

4. Applying Padding and Dimensions

Padding creates space around content within a layout or component. Compose commonly uses density-independent pixels, represented by dp, for spacing and dimensions.

Example: Padding on a Text Component

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun PaddedText() {
    Text(
        text = "Learn Jetpack Compose",
        modifier = Modifier.padding(
            horizontal = 16.dp,
            vertical = 12.dp
        )
    )
}

The horizontal padding adds space to the start and end edges, while vertical padding adds space above and below the content.

Example: Setting a Component Size

import androidx.compose.foundation.layout.size
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SquareContainer() {
    Surface(
        modifier = Modifier.size(120.dp)
    ) {
        // Add content inside the container.
    }
}

The component requests a width and height of 120dp. The final measured size can still depend on parent constraints and the component's measurement behavior.

5. Understanding Modifier Order

The order of modifiers can change the visual result because each modifier participates in layout, drawing, or interaction processing in a particular sequence.

Example: Background and Padding

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ModifierOrderExample() {
    Text(
        text = "Compose UI",
        modifier = Modifier
            .background(Color.LightGray)
            .padding(16.dp)
    )
}

In this example, the background is drawn before the padding modifier adds space around the Text content, so the gray background covers the text's immediate area rather than the additional outer padding.

Compare this with the following modifier chain:

Modifier
    .padding(16.dp)
    .background(Color.LightGray)

Here, the padding is outside the background modifier, so the additional outer padding is not painted gray. Understanding modifier order is important when designing cards, buttons, and containers.

6. Applying Backgrounds, Borders, and Shapes

Backgrounds, borders, and shapes help establish a component's appearance and distinguish it from surrounding content.

Example: Rounded Container

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun StyledLabel() {
    Text(
        text = "Android Developer",
        modifier = Modifier
            .background(
                color = Color(0xFFE3F2FD),
                shape = RoundedCornerShape(12.dp)
            )
            .border(
                width = 1.dp,
                color = Color(0xFF1565C0),
                shape = RoundedCornerShape(12.dp)
            )
            .padding(
                horizontal = 16.dp,
                vertical = 10.dp
            )
    )
}

This component uses a light blue background, a blue border, rounded corners, and internal spacing. In a production design, colors can be obtained from the app's theme instead of being hard-coded.

7. Creating Clickable Components with Modifiers

The clickable() modifier makes suitable composables respond to user clicks. For production UI, prefer standard Material components such as Button when they match the interaction, since they provide built-in interaction and accessibility behavior.

Example: Clickable Text

import androidx.compose.foundation.clickable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ClickableLabel(
    onClick: () -> Unit
) {
    Text(
        text = "Open Profile",
        modifier = Modifier.clickable {
            onClick()
        }
    )
}

The component accepts a callback from its caller. This makes the UI reusable because the caller decides what happens when the label is clicked.

8. Understanding Themes in Jetpack Compose

A theme is a centralized collection of visual rules used throughout an application. Themes help maintain a consistent design across screens and components.

In Material 3, the main theme systems are color schemes, typography, and shapes. These are provided through the MaterialTheme composable, and Material components can automatically use the values supplied by the theme.

Benefits of Using Themes

• Maintain a consistent visual identity.
• Reduce repeated styling values in individual components.
• Support light and dark appearances.
• Make application-wide design changes easier.
• Improve component reuse and maintainability.
• Provide common color and text styles for all screens.

Typical Theme Resource Structure

com.example.myapp
|
|-- ui
|   |-- theme
|   |   |-- Color.kt
|   |   |-- Theme.kt
|   |   |-- Type.kt
|   |-- screens
|   |-- components
|
|-- MainActivity.kt

This is a common organizational pattern. File names and locations may differ depending on the Android Studio project template.

9. Defining Colors in Color.kt

Centralizing colors in a Kotlin resource file helps developers maintain a consistent palette. Compose represents colors using the Color class.

Example: Creating an App Color Palette

package com.example.myapp.ui.theme

import androidx.compose.ui.graphics.Color

val BluePrimary = Color(0xFF1565C0)
val BlueSecondary = Color(0xFF00838F)
val OrangeAccent = Color(0xFFFF9800)

val LightBackground = Color(0xFFF8FAFC)
val LightSurface = Color(0xFFFFFFFF)
val DarkBackground = Color(0xFF121212)
val DarkSurface = Color(0xFF1E1E1E)

val TextOnLight = Color(0xFF1B1B1F)
val TextOnDark = Color(0xFFE6E1E5)

The hexadecimal format commonly used with Compose is 0xAARRGGBB, where AA represents alpha, RR red, GG green, and BB blue. For example, 0xFF1565C0 is an opaque blue.

10. Understanding Material 3 Color Schemes

A Material 3 color scheme provides named color roles that describe how colors should be used in an interface. Instead of selecting unrelated colors for every component, developers choose appropriate roles from the theme.

Color roles should be selected according to their intended meaning. Pairing a background with its corresponding on-color role helps preserve readable contrast.

11. Creating a Custom Light Color Scheme

Material 3 provides the lightColorScheme() function to define the colors used by the application in light mode.

Example: Light Color Scheme

package com.example.myapp.ui.theme

import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color

private val LightColors = lightColorScheme(
    primary = BluePrimary,
    onPrimary = Color.White,
    secondary = BlueSecondary,
    onSecondary = Color.White,
    tertiary = OrangeAccent,
    onTertiary = Color(0xFF202020),
    background = LightBackground,
    onBackground = TextOnLight,
    surface = LightSurface,
    onSurface = TextOnLight,
    error = Color(0xFFB3261E),
    onError = Color.White
)

This example defines a custom color scheme using the palette created earlier. Additional color roles can be configured as required by the application's design.

12. Creating a Custom Dark Color Scheme

Dark themes use darker backgrounds and surfaces with appropriately contrasting foreground colors. A separate dark color scheme helps components maintain readable and consistent styling.

Example: Dark Color Scheme

package com.example.myapp.ui.theme

import androidx.compose.material3.darkColorScheme
import androidx.compose.ui.graphics.Color

private val DarkColors = darkColorScheme(
    primary = Color(0xFF90CAF9),
    onPrimary = Color(0xFF003258),
    secondary = Color(0xFF80CBC4),
    onSecondary = Color(0xFF003731),
    tertiary = Color(0xFFFFCC80),
    onTertiary = Color(0xFF422C00),
    background = DarkBackground,
    onBackground = TextOnDark,
    surface = DarkSurface,
    onSurface = TextOnDark,
    error = Color(0xFFF2B8B5),
    onError = Color(0xFF601410)
)

Light and dark schemes should be designed as compatible palettes rather than simply inverting every color. Always verify text contrast and component states in both modes.

13. Applying MaterialTheme to the Application

After defining the color schemes, pass the selected scheme to MaterialTheme. The content inside the theme can access its values through MaterialTheme.colorScheme, MaterialTheme.typography, and MaterialTheme.shapes.

Example: Custom App Theme

package com.example.myapp.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }

    MaterialTheme(
        colorScheme = colors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
    )
}

This example assumes that AppTypography and AppShapes are defined in the theme package. The system dark-theme setting determines the default appearance, while the parameter allows a caller to override that choice.

Using the Theme in MainActivity

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.myapp.ui.theme.MyAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MyAppTheme {
                HomeScreen()
            }
        }
    }
}

Wrapping the screen in MyAppTheme makes the theme's colors, typography, and shapes available to its descendants.

14. Understanding Typography in Jetpack Compose

Typography defines how text looks throughout an application. It includes font size, font family, weight, style, letter spacing, and line height.

A well-defined typography system distinguishes headings from body text, labels, captions, and other content. Material 3 provides a standard type scale so that developers can establish a consistent text hierarchy.

Important Typography Properties

15. Understanding Material 3 Typography Styles

Material 3 organizes text into five main categories: display, headline, title, body, and label. Each category provides large, medium, and small variants where applicable.

16. Defining Custom Typography

Material 3 provides the Typography class to define an application's text styles. You can customize only the styles that need to differ from their defaults.

Example: Type.kt

package com.example.myapp.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val AppTypography = Typography(
    headlineLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Bold,
        fontSize = 32.sp,
        lineHeight = 40.sp
    ),
    titleLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp
    ),
    bodyLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp
    ),
    bodyMedium = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp,
        lineHeight = 20.sp
    ),
    labelLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp,
        lineHeight = 20.sp
    )
)

These custom styles can be applied throughout the application. Styles that are not specified continue to use the defaults provided by Material 3.

17. Applying Typography to Text Components

Instead of assigning font sizes independently to every Text composable, use the typography defined in the theme.

Example

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CourseIntroduction() {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = "Android Development",
            style = MaterialTheme.typography.headlineLarge
        )

        Text(
            text = "Learn to build modern Android applications.",
            style = MaterialTheme.typography.bodyLarge
        )

        Text(
            text = "Beginner Friendly",
            style = MaterialTheme.typography.labelLarge
        )
    }
}

Using the theme's typography makes the screen consistent with other screens that use the same styles.

18. Applying Custom Colors to Text

Text colors should normally come from the theme so that they remain suitable for both light and dark appearances.

Example

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun ThemedHeading() {
    Text(
        text = "Welcome Back",
        color = MaterialTheme.colorScheme.primary,
        style = MaterialTheme.typography.headlineMedium
    )
}

@Composable
fun ThemedDescription() {
    Text(
        text = "Continue learning with your Android course.",
        color = MaterialTheme.colorScheme.onSurface,
        style = MaterialTheme.typography.bodyLarge
    )
}

The heading uses the primary color for emphasis, while the description uses the on-surface color for readable text on a surface.

19. Understanding Dynamic Colors

Dynamic color allows an application to derive its color scheme from the user's device wallpaper and system personalization settings on supported Android versions. Material 3 provides APIs such as dynamicLightColorScheme() and dynamicDarkColorScheme().

Dynamic color is optional. An application may use a fixed brand palette, dynamic colors, or a combination of approaches depending on its design requirements.

Example: Dynamic Theme Selection

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun DynamicAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val context = LocalContext.current

    val colorScheme = when {
        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) {
                dynamicDarkColorScheme(context)
            } else {
                dynamicLightColorScheme(context)
            }
        }
        darkTheme -> DarkColors
        else -> LightColors
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
    )
}

This example uses dynamic colors on Android 12 and later, while falling back to the app's custom schemes on older versions. The dynamic scheme should be tested to ensure that important text, icons, and actions remain distinguishable.

20. Defining Shapes in Material 3

Shapes determine the corner treatment of components such as cards, buttons, dialogs, and other surfaces. Consistent shapes help establish a recognizable design language.

Example: Theme Shapes

package com.example.myapp.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp

val AppShapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(24.dp)
)

These shapes can be used by Material components through the theme, where the component supports the corresponding shape role.

21. Combining Modifiers, Colors, Themes, and Typography

The strongest results come from combining these features. Modifiers control layout and appearance, while the theme provides reusable colors, typography, and shapes.

Example: Themed Course Card

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CourseCard(
    title: String,
    description: String,
    onEnrollClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = MaterialTheme.shapes.medium,
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Text(
                text = title,
                style = MaterialTheme.typography.titleLarge,
                color = MaterialTheme.colorScheme.onSurface
            )

            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )

            Button(
                onClick = onEnrollClick
            ) {
                Text(
                    text = "Enroll Now",
                    style = MaterialTheme.typography.labelLarge
                )
            }
        }
    }
}

This component accepts its content and click behavior as parameters. It uses the current theme's shape, surface color, and typography instead of duplicating design values throughout the application.

Using the Course Card

@Composable
fun CourseScreen() {
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        CourseCard(
            title = "Android App Development",
            description = "Learn Kotlin, UI design, and Jetpack Compose.",
            onEnrollClick = {
                // Handle enrollment action.
            }
        )
    }
}

22. Accessibility and Visual Design Best Practices

Good visual design is not only about appearance. Colors, text sizes, spacing, and interactions should make the application usable for people with different needs and preferences.

• Use sp for text sizes so that user font scaling preferences are respected.
• Maintain sufficient contrast between text and its background.
• Use semantic color roles rather than unrelated hard-coded colors.
• Test both light and dark themes.
• Ensure buttons and interactive elements have suitable touch targets.
• Use descriptive labels and semantics for interactive components.
• Do not rely on color alone to communicate errors or status.
• Use line heights and spacing that make longer text easy to read.
• Check layouts with large font settings and smaller screens.
• Keep modifier chains readable and use consistent spacing values.
• Prefer Material components when they provide the expected behavior and accessibility support.

23. Common Mistakes and Troubleshooting

24. Practical Exercises

Exercise 1: Styled Welcome Screen

Create a welcome screen using Text and Button. Apply padding, background colors, typography, and rounded shapes through modifiers.

Exercise 2: Custom Color Palette

Define primary, secondary, background, surface, and error colors in a theme file. Apply these colors through MaterialTheme rather than hard-coding them in each component.

Exercise 3: Light and Dark Themes

Create light and dark color schemes and allow the application to select the appropriate scheme based on the system theme.

Exercise 4: Typography System

Create custom headline, title, body, and label styles. Apply them to different sections of a sample application screen.

Exercise 5: Reusable Course Card

Create a reusable course card using themed colors, typography, shapes, padding, and a button callback.

Exercise 6: Accessibility Testing

Test the screen using larger font settings, both theme modes, and different screen sizes. Improve contrast and fix any clipped content.

25. Interview Questions and Answers

Q1. What is a Modifier in Jetpack Compose?

A Modifier customizes a composable's layout, appearance, drawing, interaction, or semantics.

Q2. Why is modifier order important?

Modifiers process layout, drawing, and interaction in sequence, so changing their order can change the final visual or behavioral result.

Q3. What is MaterialTheme?

MaterialTheme provides shared design values such as the color scheme, typography, and shapes to composables inside its content.

Q4. What is a color scheme?

A color scheme is a collection of named color roles used consistently throughout an application.

Q5. What is the difference between primary and secondary colors?

Primary colors are generally used for prominent actions and selected states, while secondary colors provide supporting emphasis.

Q6. What is typography?

Typography defines the visual presentation of text, including font size, weight, family, line height, and letter spacing.

Q7. Why should developers use sp for text?

sp supports user font scaling preferences and is therefore appropriate for accessible text sizing.

Q8. What is dynamic color?

Dynamic color derives a color scheme from supported device personalization settings, such as wallpaper colors.

Q9. How can an app support dark mode?

Define a dark color scheme and select it according to the system setting or an explicit user preference.

Q10. Why should hard-coded colors be avoided in themed components?

Hard-coded colors can create inconsistent appearances and may not adapt correctly to light or dark themes. Theme roles centralize color choices.

Q11. What is the purpose of Material 3 Shapes?

Shapes define reusable corner treatments and other shape properties for supported UI components.

Q12. How do modifiers improve component reuse?

Modifiers let callers customize a component's layout and behavior without requiring changes to its internal implementation.

26. Quick Revision Checklist

• Modifier customizes layout, appearance, and interactions.
• Modifier order can affect layout and drawing.
• dp is commonly used for layout dimensions and spacing.
• sp is used for text sizing.
• MaterialTheme provides color schemes, typography, and shapes.
• Color.kt can store reusable color constants.
• Light and dark color schemes support different appearance modes.
• MaterialTheme.colorScheme provides semantic color roles.
• MaterialTheme.typography provides reusable text styles.
• MaterialTheme.shapes provides shared shape definitions.
• Dynamic color can personalize supported Android applications.
• Accessibility testing should include contrast and larger font settings.

27. Conclusion

Applying modifiers, themes, colors, and typography is fundamental to creating polished Android interfaces with Jetpack Compose. Modifiers control how components are arranged and displayed, themes establish consistent design rules, color schemes provide meaningful visual roles, and typography improves readability and hierarchy.

By combining these concepts with reusable components, accessible design practices, and light and dark themes, developers can build Android applications that are maintainable, responsive, and visually consistent.

Continue learning Android application development through JustAcademy:

• Explore the Android App Development Course
• Register for a Course Demo
• Visit the JustAcademy Website